{% extends "base.html" %}
{% block title %}kettle任务监控{% endblock %}
{% block head %}
    <link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css">
    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="static/plugins/jQueryUI/jquery-ui.js"></script>
    <script src="static/plugins/jQueryUI/jquery-ui.min.js"></script>
    <style>
        td {
            border: solid #add9c0;
            border-width: 0px 1px 1px 0px;
            padding: 1px;
            text-align: center;
            margin: 1px;
        }

        table {
            border: solid #add9c0;
            border-width: 1px 0px 0px 1px;
            padding: 1px;
            margin: 1px;
        }

        th {
            border: solid #add9c0;
            border-width: 0px 1px 1px 0px;
            padding: 1px;
            text-align: center;
            margin: 1px;
        }
    </style>
{% endblock %}
{% block contentheader %}数据质量报告{% endblock %}
{% block contentsmallheader %}报表、设计及生成{% endblock %}
{% block content %}
    <div class="nav-tabs-custom" id="panel_db">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#report" data-toggle="tab">
            报表详情</a></li>
        <li id="design_"><a href="#design" data-toggle="tab">设计生成报表</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="report">
            <div class="panel-group" id="accordion1">
                <div class="panel panel-info">
                    <div class="panel-heading" style="padding:6px">
                        <h4 class="panel-title" style="font-size: 13px;">
                            <a data-toggle="collapse" data-parent="#accordion1"
                               href="#collapse1">
                                项目列表
                            </a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-8" id="project_list">
                                    <table id="project_list_table" class="table table-bordered table-striped dataTable"
                                           role="grid"
                                           aria-describedby="project_list_table_info"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading" style="padding:6px">
                        <h4 class="panel-title" style="font-size: 13px;">
                            <a data-toggle="collapse" data-parent="#accordion1"
                               href="#collapse2">
                                报表详情
                            </a>
                        </h4>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="row" style="padding: 0px 10px 0px 10px;">
                                <div class="col-md-12" id="table_container" style="overflow: auto">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="tab-pane fade" id="design">
            <div class="panel-group" id="accordion">
                <div class="panel panel-info">
                    <div class="panel-heading" style="padding:6px">
                        <h4 class="panel-title" style="font-size: 13px;">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseOne">
                                项目列表
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body" style="overflow: auto" id="project_config">

                        </div>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading" style="padding:6px">
                        <h4 class="panel-title" style="font-size: 13px;">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseTwo">
                                新建项目
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="col_edit">项目配置：</label>
                                    <table class="table table-bordered" id="project_edit">
                                        <tr>
                                            <td>项目名称：</td>
                                            <td><input class="form-control" id="project_name_edit"></td>
                                        </tr>
                                        <tr>
                                            <td>加载类型：</td>
                                            <td><select autocomplete="off" class="form-control"
                                                        id="data_load_type_edit">
                                            </select></td>
                                        </tr>
                                        <tr>
                                            <td>数据源类型：</td>
                                            <td><select autocomplete="off" class="form-control"
                                                        id="data_source_type_edit">
                                                <option id="0" value=""></option>
                                            </select></td>
                                        </tr>
                                        <tr>
                                            <td>数据源：</td>
                                            <td><input class="form-control" id="data_source_edit"></td>
                                        </tr>
                                        <tr>
                                            <td>其他(分隔符)：</td>
                                            <td><input class="form-control" id="otherinfo_edit"></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-3">
                                    <label for="col_edit">字段配置：</label>
                                    <table class="table table-bordered" id="col_edit">
                                        <tr>
                                            <td>字段名：</td>
                                            <td><input class="form-control" id="col_name_edit"></td>
                                        </tr>
                                        <tr>
                                            <td>数据类型：</td>
                                            <td><select autocomplete="off" class="form-control" id="data_type">
                                            </select></td>
                                        </tr>
                                        <tr>
                                            <td>计算：</td>
                                            <td><select multiple="" autocomplete="off" class="form-control"
                                                        style="height: 85px"
                                                        id="compute_select">

                                            </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <button class="btn btn-primary" id="col_add">添 加</button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6" style="overflow: auto">
                                    <label for="col_table">已添加的字段配置：</label>
                                    <table class="table table-bordered" id="col_table" style="width: 100%">
                                        <thead>
                                        <tr>
                                            <th style="width: 10%">字段</th>
                                            <th style="width: 10%">类型</th>
                                            <th style="width: 30%">计算</th>
                                            <th style="width: 30%">报警规则</th>
                                            <th style="width: 10%">编辑</th>
                                            <th style="width: 10%">删除</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <hr>
                            <div class="row" style="text-align: center">
                                <div class="col-md-4">
                                    <label>当前操作状态：</label>
                                    <label id="status" style="color: red">Add</label>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary" id="submit">提 交</button>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary" style="color: yellow" id="clearx">清 空</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        <b></b>字段规则报警
                    </h4>
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td>row_count</td>
                            <td colspan="2">
                                <label for="">数字</label>
                                <input id='row_count_row_limit' type="text" style="width: 100px" value="0,0">
                            </td>
                        </tr>
                        <tr>
                            <td>null_count</td>
                            <td>
                                <label for="">数字</label>
                                <input id='null_count_row_limit' type="text" style="width: 100px" value="0,0">
                            </td>
                            <td>
                                <label for="">百分比</label>
                                <input id='null_count_per_limit' type="text" style="width: 100px" value="20">%
                            </td>
                        </tr>
                        <tr>
                            <td>empty_string_count</td>
                            <td>
                                <label for="">数字</label>
                                <input id='empty_count_row_limit' type="text" style="width: 100px" value="0,0">
                            </td>
                            <td>
                                <label for="">百分比</label>
                                <input id='empty_count_per_limit' type="text" style="width: 100px" value="20">%
                            </td>
                        </tr>
                        <tr>
                            <td>distinct_count</td>
                            <td colspan="2">
                                <input id='distinct_count_row_limit' type="text" style="width: 200px" value="0,0">
                            </td>
                        </tr>

                        <tr>
                            <td>mean_value</td>
                            <td colspan="2">
                                <input id='mean_count_value_limit' type="text" style="width: 200px" value="0,0">
                            </td>
                        </tr>
                        <tr>
                            <td>max_value</td>
                            <td colspan="2">
                                <input id='max_count_value_limit' type="text" style="width: 200px" value="0,0">
                            </td>
                        </tr>
                        <tr>
                            <td>min_value</td>
                            <td colspan="2">
                                <input id='min_count_value_limit' type="text" style="width: 200px" value="0,0">
                            </td>
                        </tr>
                    </table>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script type="application/javascript">
        function add_class() {
            $('#treeview5').addClass('active');
            $('#menu5').addClass('menu-open');
            $('#reportdataquality').addClass('active');
        }
        function resetModal() {
            $("input[id$='_count_row_limit']").val("0,0");
            $("input[id$='_count_value_limit']").val("0,0");
            $("input[id$='_count_per_limit']").val("20");
        }
        var currentEventNode = null;
        function startModal() {
            resetModal();
            e = this.event.target;
            currentEventNode = e;
            $('#myModal').modal();
            var warn_rules = $(e).attr("data");
            var col_name = e.parentNode.previousSibling.previousSibling.previousSibling.innerText;
            $('#myModal b').text(col_name);
            var col_data_type = e.parentNode.previousSibling.previousSibling.innerText;
            var col_computes = e.parentNode.previousSibling.innerText;
            if (warn_rules != '{}') {
                var rules = JSON.parse(warn_rules);
                $('#row_count_row_limit').val(rules.row_count_row_limit);
                $('#null_count_row_limit').val(rules.null_count_row_limit);
                $('#null_count_per_limit').val(rules.null_count_per_limit);
                $('#empty_count_row_limit').val(rules.empty_count_row_limit);
                $('#empty_count_per_limit').val(rules.empty_count_per_limit);
                $('#distinct_count_row_limit').val(rules.distinct_count_row_limit);
                $('#mean_count_value_limit').val(rules.mean_count_value_limit);
                $('#max_count_value_limit').val(rules.max_count_value_limit);
                $('#min_count_value_limit').val(rules.min_count_value_limit);
            }
        }
        $('#myModal').on('click', '.btn-primary', function () {
            var dic_limit = {};
            dic_limit["row_count_row_limit"] = $('#row_count_row_limit').val();
            dic_limit["null_count_row_limit"] = $('#null_count_row_limit').val();
            dic_limit["null_count_per_limit"] = $('#null_count_per_limit').val();
            dic_limit["empty_count_row_limit"] = $('#empty_count_row_limit').val();
            dic_limit["empty_count_per_limit"] = $('#empty_count_per_limit').val();
            dic_limit["distinct_count_row_limit"] = $('#distinct_count_row_limit').val();
            dic_limit["mean_count_value_limit"] = $('#mean_count_value_limit').val();
            dic_limit["max_count_value_limit"] = $('#max_count_value_limit').val();
            dic_limit["min_count_value_limit"] = $('#min_count_value_limit').val();
            $(currentEventNode).attr("data", JSON.stringify(dic_limit));
            currentEventNode.innerText = "{...}";
            $('#myModal').modal('hide');
        });
        //    模态框位置
        function centerModals() {
            $('#myModal').each(function (i) {
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2 - 200);
                top = top > 0 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top);
            });
        }
        $('#myModal').on('show.bs.modal', centerModals);
        $(window).on('resize', centerModals);
        var project_info ={{  project_info|safe }};
        var index_project = 0;
        var table_container = $('#table_container');
        var table_example = '<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"></table>';
        table_container.hide();
        var project_list = $('#project_list_table').DataTable({
            "jQueryUI": true,
            lengthChange: false,
            "autoWidth": false,
            "pageLength": 10,
            ordering: false,
            data: project_info.dataset,
            destroy: true,
            columns: project_info.columns,
            columnDefs: [
                {
                    "render": function (d, type, row, meta) {
                        index_project += 1;
                        return index_project
                    },
                    "targets": 0
                }, {
                    "render": function (d, type, row, meta) {
                        return "<button class='btn btn-primary btn-xs' onclick='show_report_detail();return false'  name=" + row[1] + ">查看</button>"
                    },
                    "targets": 3
                }, {
                    "render": function (d, type, row, meta) {
                        return "<button class='btn btn-primary btn-xs' onclick='delete_report_detail();return false' name=" + row[1] + ">删除</button>"
                    },
                    "targets": 4
                }]
        });
        function show_report_detail() {
            e = this.event;
            $('#collapse2').collapse('show');
            $('#collapse1').collapse('toggle');
            $('#table_container').empty();
            $('#table_container').append(table_example);
            $.ajax({
                data: {tablename: e.target.name},
                url: '/data_report_data_quality_get_report', success: function (data) {
                    fill_tree(data);
                    table_container.show()
                }
            });
        }
        function delete_report_detail() {
            e = this.event;
            if (confirm('确定要删除报表详情吗?')) {
                e.target.parentNode.parentNode.remove();
                project_list.row(e.target.parentNode.parentNode).remove().draw(false);
                $.ajax({
                    data: {projectname: e.target.name},
                    url: '/data_report_data_quality_delete_report', success: function (data) {

                        table_container.hide()
                    }
                });
            }
        }

        function add_class() {
            $('#treeview6').addClass('active');
            $('#menu6').addClass('menu-open');
            $('#reportdataquality').addClass('active');
        }
        function clear_talbe_config() {
            $('#project_name_edit').val("");
            $('#data_source_edit').val("");
            $('#otherinfo_edit').val("");
            $('#data_load_type_edit').find("option").removeAttr('selected');
            $('#data_source_type_edit').find("option").removeAttr('selected');
        }
        function clear_col_config() {
            $('#col_name_edit').val("");
            $('#data_type').find("option").removeAttr('selected');
            $('#compute_select').find('option').removeAttr('selected');
        }
        function clear_col_table() {
            $('#col_table tbody').empty();
        }
        function col_edits() {
            e = this.event;
            var current_row = e.target.parentNode.parentNode.parentNode;
            $('#col_name_edit').val(current_row.childNodes[0].innerText);
            $('#data_type').find("option[value='" + current_row.childNodes[1].innerText + "']").prop("selected", true);
            var mul_select = current_row.childNodes[2].innerText.split(',');
            $('#compute_select').find('option').removeAttr('selected');
            for (var i = 0; i < mul_select.length; i++) {
                $('#compute_select').find("option[value='" + mul_select[i] + "']").prop('selected', true);
            }
            current_row.remove();
        }
        function col_removes() {
            e = this.event;
            e.target.parentNode.parentNode.parentNode.remove();
        }
        var projectid = 0;
        var table_config = '<table id="project_config_table" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="project_config_table_info"></table>';
        function begin_compute() {
            e = this.event;
            var status = e.target.innerText;
            if (status == '开始计算') {
                alert('任务准备提交,确定后请等待页面返回....');
                e.target.innerText = "正在计算中";
                $.ajax({
                    timeout: 300000,
                    url: "/data_report_data_quality_submit_compute",
                    data: {'project_name': e.target.name},
                    success: function (data) {
                        if (data == 'ok') {
                            alert("请刷新页面观察计算状态...")
                        }
                        else {
                            alert("异常,请联系管理员！！！" + data)
                        }
                    }
                });

            } else {
                alert("正在计算中，请稍后刷新页面更新状态...")
            }
        }
        function project_edit() {
            e = this.event;
            projectid = e.currentTarget.name;
            $('#collapseTwo').collapse('show');
            $('#collapseOne').collapse('toggle');
            $('#status').html("Edit");
            $('#project_name_edit').val(e.currentTarget.parentNode.parentNode.children[1].innerText);
            $('#data_load_type_edit').find('option[value="' + e.currentTarget.parentNode.parentNode.children[2].innerText + '"]').prop('selected', true);
            $('#data_source_type_edit').find('option[value="' + e.currentTarget.parentNode.parentNode.children[3].innerText + '"]').prop('selected', true);
            $('#data_source_edit').val($(e.currentTarget.parentNode.parentNode.children[4].firstChild).attr('data-content'));
            $('#otherinfo_edit').val(e.currentTarget.parentNode.parentNode.children[5].innerText);
            clear_col_config();
            clear_col_table();
            var col_trs = $($(e.currentTarget.parentNode.parentNode.children[6].firstChild).attr('data-content')).children(0).children();
            for (var i = 1; i < col_trs.length; i++) {
                var col_name = col_trs[i].children[0].innerText;
                var col_data_type = col_trs[i].children[1].innerText;
                var col_computes = col_trs[i].children[2].innerText;
                var warn_rule = $(col_trs[i].children[3]).attr("data");
                if (warn_rule == "{}")
                    $('#col_table tbody').append('<tr><td>' + col_name + '</td><td>' + col_data_type + '</td><td>' + col_computes + '</td><td><a data=' + warn_rule + ' href="javascript:;" onClick="startModal();return false;" class="warn_rule">{}</a></td><td><a><i onClick="col_edits();return false;" class="fa fa-edit"></td><td><a><i onclick="col_removes();return false;" class="fa fa-remove"></a></td></tr>');
                else
                    $('#col_table tbody').append('<tr><td>' + col_name + '</td><td>' + col_data_type + '</td><td>' + col_computes + '</td><td><a data=' + warn_rule + ' href="javascript:;" onClick="startModal();return false;" class="warn_rule">{...}</a></td><td><a><i onClick="col_edits();return false;" class="fa fa-edit"></td><td><a><i onclick="col_removes();return false;" class="fa fa-remove"></a></td></tr>');
            }
        }
        function project_delete() {
            e = this.event;
            if (confirm('确定要删除报表项目的配置吗?')) {
                var table_config_id = e.currentTarget.name;
                $.ajax({
                    type: "post",
                    url: "/data_report_data_quality_update_config",
                    data: {'status': 'Delete', 'project_id': table_config_id},
                    success: function (data) {
                        fill_config();
                    }
                });
            }
        }
        function fill_config() {
            var i = 0;
            $('#project_config').empty();
            $('#project_config').append(table_config);
            $.ajax({
                url: '/data_report_data_quality_get_config', success: function (data) {
                    var config = data.config;
                    if (config != '' && $('#data_load_type_edit option').length == 0) {
                        for (var key in config) {
                            if (config[key][2] == 1)
                                $('#compute_select').append('<option value=' + config[key][0] + ' id=' + key + '>' + config[key][0] + '</option>');
                            else if (config[key][2] == 2)
                                $('#data_type').append('<option value=' + config[key][0] + ' id=' + key + '>' + config[key][0] + '</option>');
                            else if (config[key][2] == 3)
                                $('#data_load_type_edit').append('<option value=' + config[key][0] + ' id=' + key + '>' + config[key][0] + '</option>');
                            else if (config[key][2] == 4)
                                $('#data_source_type_edit').append('<option value=' + config[key][0] + ' id=' + key + '>' + config[key][0] + '</option>');
                        }
                    }
                    $("#project_config_table").DataTable({
                        "jQueryUI": true,
                        "autoWidth": false,
                        lengthChange: false,
                        "pageLength": 10,
                        ordering: false,
                        data: data.data.dataset,
                        destroy: true,
                        columns: data.data.columns,
                        columnDefs: [{
                            "render": function (d, type, row, meta) {
                                i = i + 1;
                                return i
                            },
                            "targets": 0
                        }, {
                            "render": function (d, type, row, meta) {
                                var project_id = row[0];
                                return "<a target='_blank' onclick='project_edit();return false;' class='edit' name=" + project_id + "><i  class='fa fa-edit'></i></a>"
                            },
                            "targets": 7
                        }, {
                            "render": function (d, type, row, meta) {
                                var project_id = row[0];
                                return "<a target='_blank' onclick='project_delete();return false;' class='delete' name=" + project_id + "><i  class='fa fa-remove'></i></a>"
                            },
                            "targets": 8
                        }, {
                            "render": function (d, type, row, meta) {
                                var project_name = row[1];
                                if (d == 2)
                                    return "<button class='btn btn-primary btn-xs' name=" + project_name + ">正在计算中</button>";
                                else
                                    return "<button class='btn btn-primary btn-xs' onclick='begin_compute();return false;' name=" + project_name + ">开始计算</button>";
                            },
                            "targets": 12
                        }, {
                            "render": function (d, type, row, meta) {
                                if (d.length > 10)
                                    return "<a target='_blank' data-container='body' data-original-title='数据源' data-trigger='hover' data-toggle='popover'  data-content=\"" + d + "\">" + d.substring(0, 9) + "......</a>";
                                else
                                    return "<a target='_blank' data-container='body' data-original-title='数据源' data-trigger='hover' data-toggle='popover'  data-content=\"" + d + "\">" + d + "</a>";
                            },
                            "targets": 4
                        }, {
                            "render": function (d, type, row, meta) {
                                var html_start = "<table><tr><td>字段</td><td>类型</td><td>计算</td><td>报警规则</td></tr>";
                                var html_end = "</table>";
                                var templete = '';
                                for (var j = 0; j < row[6].length; j++) {
                                    if (row[6][j][3].toString() == "{}")
                                        templete += '<tr><td>' + row[6][j][0] + '</td><td>' + row[6][j][1] + '</td><td>' + row[6][j][2].toString() + '</td><td data=' + row[6][j][3].toString() + '>{}</td></tr>';
                                    else
                                        templete += '<tr><td>' + row[6][j][0] + '</td><td>' + row[6][j][1] + '</td><td>' + row[6][j][2].toString() + '</td><td data=' + row[6][j][3].toString() + '>{...}</td></tr>';
                                }
                                return "<a target='_blank' data-container='body' data-original-title='字段配置详情' data-trigger='click' data-toggle='popover' data-content='" + html_start + templete + html_end + "'>detail...</a>";
                            },
                            "targets": 6
                        }]
                    });
                    $("[data-toggle='popover']").popover({
                        html: 'true',
                        placement: 'right',
                    });
                    $("#project_config_table").on('draw.dt', function () {
                        $("[data-toggle='popover']").popover({
                            html: 'true',
                            placement: 'right'
                        });
                    });
                }
            });
        }
        function fill_tree(data) {
            $('#example1').DataTable({
                "jQueryUI": true,
                "autoWidth": false,
                lengthChange: false,
                "pageLength": 10,
                ordering: false,
                data: data.data.dataset,
                destroy: true,
                columns: data.data.columns,
                columnDefs: [{
                    "render": function (d, type, row, meta) {
                        {#                        console.log(row);#}
                        var warn_rule = JSON.parse(row[14]);
                        if (d == null || warn_rule == null)
                            return d;
                        else {
                            if (warn_rule.hasOwnProperty("row_count_row_limit") && warn_rule.row_count_row_limit != "0,0") {
                                var bl = parseInt(warn_rule.row_count_row_limit.split(",")[0]);
                                var tl = parseInt(warn_rule.row_count_row_limit.split(",")[1]);
                                var flag1 = true;
                                if (tl == -1) flag1 = parseInt(d) >= bl;
                                else flag1 = tl >= parseInt(d) && parseInt(d) >= bl;
                                if (flag1)
                                    return d;
                                else
                                    return d + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.row_count_row_limit + '"><i class="fa fa-warning"></a>';
                            } else
                                return d;
                        }
                    },
                    "targets": 3
                },
                    {
                        "render": function (d, type, row, meta) {
                            var warn_rule = JSON.parse(row[14]);
                            if (d == null || warn_rule == null)
                                return d;
                            else {
                                var flag1 = true;
                                var flag2 = true;
                                if (warn_rule.hasOwnProperty("null_count_row_limit") && warn_rule.null_count_row_limit != "0,0") {
                                    var bl = parseInt(warn_rule.null_count_row_limit.split(",")[0]);
                                    var tl = parseInt(warn_rule.null_count_row_limit.split(",")[1]);
                                    if (tl == -1) flag1 = parseInt(d) >= bl;
                                    else flag1 = tl >= parseInt(d) && parseInt(d) >= bl;
                                }
                                if (warn_rule.hasOwnProperty("null_count_per_limit")) {
                                    var per = parseInt(warn_rule.null_count_per_limit);
                                    if (row[3] != null && row[3] != "0" && parseInt(d) / row[3] * 100 >= per) flag2 = false;
                                }
                                if (flag1 && flag2)
                                    return d;
                                else
                                    return d + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.null_count_row_limit + ' | 占总行数百分比限制' + warn_rule.null_count_per_limit + '%"><i class="fa fa-warning"></a>';
                            }
                        },
                        "targets": 4
                    },
                    {
                        "render": function (d, type, row, meta) {
                            var warn_rule = JSON.parse(row[14]);
                            if (d == null || warn_rule == null)
                                return d;
                            else {
                                var flag1 = true;
                                var flag2 = true;
                                if (warn_rule.hasOwnProperty("empty_count_row_limit") && warn_rule.empty_count_row_limit != "0,0") {
                                    var bl = parseInt(warn_rule.empty_count_row_limit.split(",")[0]);
                                    var tl = parseInt(warn_rule.empty_count_row_limit.split(",")[1]);
                                    if (tl == -1) flag1 = parseInt(d) >= bl;
                                    else flag1 = tl >= parseInt(d) && parseInt(d) >= bl;
                                }
                                if (warn_rule.hasOwnProperty("empty_count_per_limit")) {
                                    var per = parseInt(warn_rule.empty_count_per_limit);
                                    if (row[3] != null && row[3] != "0" && parseInt(d) / row[3] * 100 >= per) flag2 = false;
                                }
                                if (flag1 && flag2)
                                    return d;
                                else
                                    return d + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.empty_count_row_limit + ' | 占总行数百分比限制' + warn_rule.empty_count_per_limit + '%"><i class="fa fa-warning"></a>';
                            }
                        },
                        "targets": 5
                    },
                    {
                        "render": function (d, type, row, meta) {
                            {#                        console.log(row);#}
                            var warn_rule = JSON.parse(row[14]);
                            if (d == null || warn_rule == null)
                                return d;
                            else {
                                if (warn_rule.hasOwnProperty("distinct_count_row_limit") && warn_rule.distinct_count_row_limit != "0,0") {
                                    var bl = parseInt(warn_rule.distinct_count_row_limit.split(",")[0]);
                                    var tl = parseInt(warn_rule.distinct_count_row_limit.split(",")[1]);
                                    var flag1 = true;
                                    if (tl == -1) flag1 = parseInt(d) >= bl;
                                    else flag1 = tl >= parseInt(d) && parseInt(d) >= bl;
                                    if (flag1)
                                        return d;
                                    else
                                        return d + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.distinct_count_row_limit + '"><i class="fa fa-warning"></a>';
                                } else
                                    return d;
                            }
                        },
                        "targets": 6
                    },
                    {
                        "render": function (d, type, row, meta) {
                            if (typeof d == 'string') {
                                var html_start = "<table><tr><td>项</td><td>值</td></tr>";
                                var html_end = "</table>";
                                var templete = '';
                                var item = d.replace(new RegExp("[\\[\\]]", "gm"), '').split('=>');
                                var item_list = item[1].split('|');
                                for (var i = 1; i <= item_list.length; i++) {
                                    templete += '<tr><td>' + i + '</td><td>' + item_list[i - 1] + '</td></tr>'
                                }
                                return "<a target='_blank' data-container='body' data-original-title='众数详情' data-trigger='hover' data-toggle='popover'  data-content='" + html_start + templete + html_end + "'>" + d.substring(0, 5) + "......</a>";
                            }
                            else
                                return d
                        },
                        "targets": 7
                    }, {
                        "render": function (d, type, row, meta) {
                            if (typeof d == 'string') {
                                var html_start = "<table><tr><td>项</td><td>值</td></tr>";
                                var html_end = "</table>";
                                var templete = '';
                                var item = d.replace(new RegExp("[\\[\\]]", "gm"), '').split('=>');
                                var item_list = item[1].split('|');
                                for (var i = 1; i <= item_list.length; i++) {
                                    templete += '<tr><td>' + i + '</td><td>' + item_list[i - 1] + '</td></tr>'
                                }
                                return "<a target='_blank' data-container='body' data-original-title='少数详情' data-trigger='hover' data-toggle='popover'  data-content='" + html_start + templete + html_end + "'>" + d.substring(0, 5) + "......</a>";
                            }
                            else
                                return d
                        },
                        "targets": 8
                    }, {
                        "render": function (d, type, row, meta) {
                            if (typeof d == 'string') {
                                var html_start = "<table><tr><td>项</td><td>值</td></tr>";
                                var html_end = "</table>";
                                var templete = '';
                                var item = d.replace(new RegExp("[\\[\\]]", "gm"), '').split('=>');
                                var item_list = item[0].split(',');
                                var item_value_list = item[1].split('|');
                                for (var i = 1; i <= item_list.length; i++) {
                                    templete += '<tr><td>' + item_list[i - 1] + '</td><td>' + item_value_list[i - 1] + '</td></tr>'
                                }
                                return "<a target='_blank' data-container='body' data-original-title='中位数详情' data-trigger='hover' data-toggle='popover'  data-content='" + html_start + templete + html_end + "'>" + d.substring(0, 5) + "......</a>";
                            }
                            else
                                return d
                        },
                        "targets": 9
                    },
                    {
                        "render": function (d, type, row, meta) {
                            {#                        console.log(row);#}
                            var warn_rule = JSON.parse(row[14]);
                            if (d != null && d.length > 20)
                                newd = '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="' + d + '">' + d.substring(0, 20) + '...</a>';
                            if (d == null || warn_rule == null)
                                return newd;
                            else {
                                if (warn_rule.hasOwnProperty("max_count_value_limit") && warn_rule.max_count_value_limit != "0,0") {
                                    var bl = parseFloat(warn_rule.max_count_value_limit.split(",")[0]);
                                    var tl = parseFloat(warn_rule.max_count_value_limit.split(",")[1]);
                                    var flag1 = true;
                                    if (tl == -1) flag1 = parseFloat(d) >= bl;
                                    else flag1 = tl >= parseFloat(d) && parseFloat(d) >= bl;
                                    if (flag1)
                                        return newd;
                                    else
                                        return newd + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.max_count_value_limit + '"><i class="fa fa-warning"></a>';
                                } else
                                    return newd;
                            }
                        },
                        "targets": 10
                    }, {
                        "render": function (d, type, row, meta) {
                            {#                        console.log(row);#}
                            var warn_rule = JSON.parse(row[14]);
                            if (d != null && d.length > 20)
                                newd = '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="' + d + '">' + d.substring(0, 20) + '...</a>';
                            if (d == null || warn_rule == null)
                                return newd;
                            else {
                                if (warn_rule.hasOwnProperty("min_count_value_limit") && warn_rule.min_count_value_limit != "0,0") {
                                    var bl = parseFloat(warn_rule.min_count_value_limit.split(",")[0]);
                                    var tl = parseFloat(warn_rule.min_count_value_limit.split(",")[1]);
                                    var flag1 = true;
                                    if (tl == -1) flag1 = parseFloat(d) >= bl;
                                    else flag1 = tl >= parseFloat(d) && parseFloat(d) >= bl;
                                    if (flag1)
                                        return newd;
                                    else
                                        return newd + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.min_count_value_limit + '"><i class="fa fa-warning"></a>';
                                } else
                                    return newd;
                            }
                        },
                        "targets": 11
                    }, {
                        "render": function (d, type, row, meta) {
                            {#                        console.log(row);#}
                            var warn_rule = JSON.parse(row[14]);
                            if (d != null && d.length > 20)
                                newd = '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="' + d + '">' + d.substring(0, 20) + '...</a>';
                            if (d == null || warn_rule == null)
                                return newd;
                            else {
                                if (warn_rule.hasOwnProperty("mean_count_value_limit") && warn_rule.mean_count_value_limit != "0,0") {
                                    var bl = parseFloat(warn_rule.mean_count_value_limit.split(",")[0]);
                                    var tl = parseFloat(warn_rule.mean_count_value_limit.split(",")[1]);
                                    var flag1 = true;
                                    if (tl == -1) flag1 = parseFloat(d) >= bl;
                                    else flag1 = tl >= parseFloat(d) && parseFloat(d) >= bl;
                                    if (flag1)
                                        return newd;
                                    else
                                        return newd + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="限制' + warn_rule.mean_count_value_limit + '"><i class="fa fa-warning"></a>';
                                } else
                                    return newd;
                            }
                        },
                        "targets": 12
                    }, {
                        "render": function (d, type, row, meta) {
                            if (d == "0" || d == null)
                                return d;
                            else
                                return d + '<a target="_blank" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="有' + d + '行数据类型转换失败！"><i class="fa fa-warning">';
                        },
                        "targets": 13
                    }]
            });
            $("[data-toggle='popover']").popover({
                html: 'true',
                placement: 'right'
            });
            $("#example1").on('draw.dt', function () {
                $("[data-toggle='popover']").popover({
                    html: 'true',
                    placement: 'right'
                });
            });
        }
        var flag = 0;
        $('#design_').on('click', function () {
            if (flag == 0) {
                flag = 1;
                fill_config();
            }
        });
        $('#col_add').on('click', function () {
            var colnames = $('#col_name_edit').val().trim();
            var datatype = $('#data_type').find("option:selected");
            var computes = $('#compute_select').find('option:selected');
            if (colnames.trim() == '' || computes.size() == 0)
                return;
            colnames = colnames.split(',');
            for (var key in colnames) {
                if (colnames[key] == '')
                    continue
                var compute_txt = "";
                for (var i = 0; i < computes.size(); i++) {
                    compute_txt += computes[i].text + ','
                }
                $('#col_table tbody').append('<tr><td>' + colnames[key] + '</td><td>' + datatype.text() + '</td><td>' + compute_txt + '</td><td><a data="{}" href="javascript:;" onClick="startModal();return false;" class="warn_rule">{}</a></td><td><a><i onclick="col_edits();return false;" class="fa fa-edit"></td><td><a><i onclick="col_removes();return false;" class="fa fa-remove"></a></td></tr>');
            }
            clear_col_config();
        });
        $('#submit').on('click', function () {
            var projectname = $('#project_name_edit').val().trim();
            var datasource = $('#data_source_edit').val().trim();
            var dataloadtypeid = $('#data_load_type_edit').find("option:selected").attr('id');
            var datasourcetypeid = $('#data_source_type_edit').find("option:selected").attr('id');
            var otherinfo = $('#otherinfo_edit').val().trim();
            if ((dataloadtypeid == '15' && datasourcetypeid == '0') || projectname == "" || datasource == "" || (otherinfo == "" && datasourcetypeid == '19') || $('#col_table tbody').children.length == 0) {
                return;
            }
            var project_json = {
                'projectid': projectid,
                'name': projectname,
                'datasource': datasource,
                'dataloadtypeid': dataloadtypeid,
                'datasourcetypeid': datasourcetypeid,
                'otherinfo': otherinfo
            };
            var cols_json = new Array();
            var cols = $('#col_table tbody').children();
            for (var i = 0; i < cols.length; i++) {
                col_json = {
                    'name': cols[i].firstChild.innerText,
                    'datatype': cols[i].childNodes[1].innerText,
                    'computes': cols[i].childNodes[2].innerText,
                    'warn_rules': $(cols[i].childNodes[3].childNodes[0]).attr("data")
                };
                cols_json[i] = col_json;
            }

            $.ajax({
                type: 'post',
                url: "/data_report_data_quality_update_config",
                data: {
                    'status': $('#status').html(),
                    'project': JSON.stringify(project_json),
                    'cols': JSON.stringify(cols_json)
                },
                success: function (data) {
                    clear_talbe_config();
                    clear_col_table();
                    $('#collapseOne').collapse('show');
                    $('#collapseTwo').collapse('toggle');
                    fill_config();

                }
            })
        });
        $('#clearx').on('click', function () {
            clear_talbe_config();
            clear_col_table();
            clear_col_config();
            $('#status').html("Add");
        });
    </script>
{% endblock %}